<template>
    <div v-if="loaded">
        <Header :params="params"/>

        <el-tabs v-model="pane" v-if="loaded">
            <!--合同信息-->
            <Contract :params="params"/>

            <!--履约任务-->
            <Perform :params="contractParams"/>

            <!--审批记录-->
            <Permission :params="contractParams"/>

            <!--盖章记录-->
            <Sign :params="contractParams"/>

            <!--归档记录-->
            <Archive :params="contractParams"/>

            <!--附件管理-->
            <Attach :params="contractParams"/>

            <!--物料管理-->
            <Material :params="contractParams"/>
        </el-tabs>
    </div>
</template>

<script>
import Header from "./blocks/header.vue"
import Contract from "./blocks/contract.vue";
import Perform from "./blocks/perform.vue";
import Permission from "./blocks/permission.vue";
import Sign from "./blocks/sign.vue";
import Archive from "./blocks/archive.vue";
import Attach from "./blocks/attach.vue";
import Material from "./blocks/material.vue";

export default {
    components: {
        Header,
        Contract,
        Perform,
        Permission,
        Sign,
        Archive,
        Attach,
        Material
    },
    props: {
        params: Object
    },
    data() {
        return {
            pane: 'contract',
            contractParams: null,
            loaded: false,
        };
    },
    async created() {
        const id = this.params.id
        this.contractParams = {contractId: id}
        this.loaded = true
    },
};
</script>

